﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">   
    <link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css" /> 
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">附件管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
				<li><a href="/admin/dashboard/index"><i class="fa fa-home"></i> 首页</a></li>
				<li class="active">附件管理</li>
			</ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
	                 <!-- <span class="pull-right badge badge-info">32</span> -->
	                 <button class="btn btn-primary btn-addon btn-sm" data-toggle="modal" th:onclick="javascript: openUploadDialog()">
	                     <i class="fa fa-plus"></i>上传附件
	                 </button>
	            </div>
			    <div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th style="width:50px;">选择</th>
								<th style="width:80px;">编码</th>
								<th style="width:500px;">文件名称</th>
								<th>文件类型</th>
								<th>文件大小</th>
								<th style="width:300px;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="attachment : ${attachments.list}">
								<td><input type="checkbox" class="flat-grey list-child" th:value="${attachment.id}" /></td>
								<td th:text="${attachment.code}"></td>
								<td th:text="${attachment.filename}"></td>
								<td th:text="${attachment.filetype}"></td>
								<td th:text="${attachment.filesize}"></td>
								<td>
									<a th:href="@{/admin/attachment/download(id=${attachment.id})}" target="_blank" class="btn btn-xs btn-success">下载预览</a>
									<span>&nbsp;|&nbsp;</span>
									<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:aid="${attachment.id}" th:onclick="javascript:confrimRemove(this.getAttribute('aid'))">删除</a>
								</td>
							</tr>
							<tr th:if="${#lists.isEmpty(attachments.list)}">
								<td colspan="7" align="center">无数据</td>
							</tr>
						</tbody>
					</table>
			    </div>
			    <div class="panel-footer bg-white text-right">
                     <ul class="pagination">
                         <li><a th:href="@{/admin/category/list(pageNum=${attachments.navigateFirstPage},pageSize=${attachments.pageSize})}" title="首页" th:class="${attachments.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${attachments.prePage},pageSize=${attachments.pageSize})}" title="上一页" th:if="${attachments.hasPreviousPage}">‹</a></li>
                         <li th:each="pageinfo : ${attachments.navigatepageNums}"><a th:href="@{/admin/category/list(pageNum=${pageinfo},pageSize=${attachments.pageSize})}" th:class="${pageinfo == attachments.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${attachments.nextPage},pageSize=${attachments.pageSize})}" title="下一页" th:if="${attachments.hasNextPage}">›</a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${attachments.navigateLastPage},pageSize=${attachments.pageSize})}" title="未页" th:class="${attachments.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
                     </ul>
                 </div>
			</section>
		</div>
	</div>
	
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="upload-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
                    	<div class="alert alert-block alert-danger">
	                        <strong>注意!</strong> 上传成功后切记点击确定按钮，否则不会保存！
	                    </div>
                    	<form class="col s12" id="form1" th:action="@{/admin/attachment/add}" method="post">
                    		<input name="filename" id="filename" type="hidden" />
                    		<input name="filepath" id="filepath" type="hidden" />
                    		<input name="filetype" id="filetype" type="hidden" />
                    		<input name="filesize" id="filesize" type="hidden" />
							<div id="uploader" class="wu-example">
							    <div class="btns">
							        <div id="picker">选择文件...</div>
							    </div>
							</div>
						</form>
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="save();">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
	<script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
	<script type="text/javascript">
		function initUploader(picker,inputEl){
	    	var uploader = WebUploader.create({
	    		auto: true,
		        // swf文件路径
		        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/uploadFile',
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#' + picker,
		        fileNumLimit: 1,
		        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		        resize: false
		    });
	    	uploader.on('fileQueued', function(file) {
	    		
	    	});
		    uploader.on('uploadSuccess', function(file, response) {
		    	console.log(response);
		    	$("body").MessageBox({
					type: 'success',
					message: '上传成功！',
					timeout:3000,
					callbak:null
				});
		    	$("#filename").val(response.data.originalFilename);
		    	$("#filepath").val(response.data.filepath);
		    	$("#filesize").val(response.data.filesize);
		    	$("#filetype").val(response.data.filetype);
		    });
		    uploader.on('uploadError', function( file ) {
		    	$("body").MessageBox({
					type: 'error',
					message: '上传失败！',
					timeout:3000,
					callbak:null
				});
		    });
	    }
	    
	    $(document).ready(function () {
	    	$("#upload-dialog").on('shown.bs.modal',function(){
		    	initUploader("picker","fileUpload");
			});
		    renderCheckBox();
	    });
		
		function renderCheckBox(){
			$('input').on('ifChecked', function(event) {
			    $(this).parents('li').addClass("task-done");
			    console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
			    $(this).parents('li').removeClass("task-done");
			    console.log('not');
			});
			
			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
			    checkboxClass: 'icheckbox_flat-grey',
			    radioClass: 'iradio_flat-grey'
			});
		}
		
		function openUploadDialog(){
			$("#upload-dialog").modal();
		}
		
		function save(){
			var filepath = $("#filepath").val();
			if(filepath == null || filepath == "" || filepath == "undefined"){
				return;
			}
			$("#form1").submit();
		}
		
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/admin/attachment/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
	</script>
</body>
</html>
